<template>
  <!-- 同城拓客 添加 -->
  <div class="tctk">
    <div class="row">
      <div class="line"></div>
      <div>编辑</div>
      <div class="iconfont icon-close" @click="goBack()">&#xe608;</div>
    </div>
    <div class="tab-item">
      <!-- 左侧 tab切换 -->
      <div class="vertical-tab-block">
        <my-tabs-vertical
          :value.sync="activeTabVal"
          :list="tabList"
        ></my-tabs-vertical>
      </div>
      <!-- 左侧 tab切换 | 第一步 -->
      <div v-if="activeTabVal == 1" class="vertical-tab-item">
        <my-complex-form
          :formData="step_1"
          @changeFormData="changeFormData($event, 'step_1')"
          @handleClickBtn="handleClickBtn($event, 'step_1')"
        ></my-complex-form>
      </div>
      <!-- 左侧 tab切换 | 第二步 -->
      <div v-if="activeTabVal == 2" class="vertical-tab-item">
        <my-complex-form
          :formData="step_2"
          @changeFormData="changeFormData($event, 'step_2')"
          @handleClickBtn="handleClickBtn($event, 'step_2')"
          @uploadMultiple="uploadMultiple($event, 'step_2')"
          @deleteMultiple="deleteMultiple($event, 'step_2')"
        ></my-complex-form>
      </div>
    </div>
    <!-- 下一步 上一步 提交 重置 -->
    <div class="form-btn-list">
      <my-button v-if="activeTabVal > 1" bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="prev"
        >上一步</my-button
      >
      <my-button v-if="activeTabVal < 2" bgc="#fff" border="#DCDCDF" fontColor="#CB8CF5" @click="next"
        >下一步</my-button
      >
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="confirm">确认</my-button>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#DCDCDF" @click="reset"
        >重置</my-button
      >
    </div>
    <!-- ---------------- 弹窗 ---------------- -->
    <el-dialog
      :visible.sync="step_1.poi_name.show"
      width="50%"
      :show-close="false"
    >
      <div class="header">
        <div class="label">地点</div>
        <div class="iconfont icon-close" @click="step_1.poi_name.show = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <div class="search-block">
          <my-form :list="placeQuery" @changeFormData="changeForm"></my-form>
          <my-button
            bgc="#fff" border="#DCDCDF" fontColor="#387CF7"
            @click="searchPlace"
            style="margin-left: 15px"
            >搜索</my-button
          >
        </div>
        <div class="place-list">
          <div
            v-for="(radio, index) in step_1.poi_name.list"
            :key="index"
            class="list-item"
            @click="handleClickDialogRadio(radio)"
          >
            <div
              class="radio"
              :class="{
                active: radio.poi_id == step_1.poi_name.value.poi_id,
              }"
            ></div>
            <div class="label">
              <div class="name">{{ radio.poi_name }}</div>
              <div class="city">{{ radio.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="step_1.poi_name.show = false"
          >关闭</my-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myComplexForm from "@/components/myComplexForm.vue";
import myTabs from "@/components/myTabs.vue";
import myTabsVertical from "@/components/myTabsVertical.vue";
import myForm from "@/components/myForm.vue";
import data from "@/data/tctk.js";

export default {
  components: {
    myButton,
    myForm,
    myComplexForm,
    myTabs,
    myTabsVertical,
  },
  data() {
    return {
      step_1: data.edit_step_1, // 第一步
      step_2: data.edit_step_2, // 第二步
      placeQuery: {
        keyword: {
          type: "input",
          label: "名称",
          value: "",
          placeholder: "请输入名称",
        },
        city: {
          type: "input",
          label: "城市",
          value: "",
          placeholder: "请输入城市",
        },
      }, // 地点弹窗搜索条件
      activeTabVal: 1,
      tabList: data.tabList,
      total: 0,
      limit: 15,
      currentPage: 1,
      formData: {},
    };
  },
  watch: {
    // 当切换 地点 小程序
    "step_1.placeOrApp": {
      handler(val) {
        this.step_1.poi_name.hidden = val.value.value == 1 ? false : true;
        this.step_1.app.hidden = val.value.value == 1 ? true : false;
      },
      deep: true,
    },
    "step_1.sharetime": {
      handler(val) {
        let value = val.value.value;
        // 立即分享
        if (value == 0) {
          this.step_1.sharetime_minute.hidden = true;
          this.step_1.sharetime_hour.hidden = true;
        }
        // 延时分享
        if (value == 1) {
          this.step_1.sharetime_minute.hidden = false;
          this.step_1.sharetime_hour.hidden = true;
        }
        // 特定时间
        if (value == 2) {
          this.step_1.sharetime_minute.hidden = true;
          this.step_1.sharetime_hour.hidden = false;
        }
      },
      deep: true,
    },
  },

  mounted() {
    this.getUserList();
    let tmpl = window.sessionStorage.getItem("tmpl");
    if (tmpl) {
      this.step_2.ai.desc = `<span style="color:#f33e5a;">已选择</span>`;
    }
    if (this.$route.query.activeTabVal) {
      this.activeTabVal = this.$route.query.activeTabVal;
    }
    this.getDetails();
  },
  methods: {
    async uploadMultiple(result, dataName) {
      let { files, key } = result;
      let file = {};
      for (let k in files) {
        file[k] = file[k] ? file[k] : {};
        let formData = new FormData();
        formData.append("file", files[k], files[k].name);
        let res = await this.$api.uploadFile(formData);
        file[k].src = res.data.url;
        file[k].name = files[k].name;
      }
      let obj = JSON.parse(JSON.stringify(this[dataName][key]));
      obj.files = file;
      let value = "";
      for (let a in obj.files) {
        value = value + obj.files[a].src + "|";
      }
      obj.value = value.substr(0, value.length - 1);
      this.$set(this[dataName], key, obj);
    },
    deleteMultiple(result, dataName) {
      let obj = JSON.parse(JSON.stringify(this[dataName][result.key]));
      delete obj.files[result.k];
      this.$set(this[dataName], result.key, obj);
    },
    async getDetails() {
      let res = await this.$api.tctk_getDetailById({
        id: this.$route.query.id,
        qt_json: "20210728",
      });
      console.log(res, "details");
      this.detail = JSON.parse(JSON.stringify(res.data));
      // # 标题 # 话题
      this.step_1.title.value = res.data.title;
      this.step_1.tags.value = res.data.tags;
      // #地点 #小程序
      if (res.data.micro_app_id) {
        this.step_1.placeOrApp.value = {
          label: "小程序",
          value: 2,
        };
        let obj = this.step_1.app;
        for (let key in obj.list) {
          obj.list[key].value = res.data[key];
        }
        this.$set(this.step_1, "app", obj);
      } else {
        this.step_1.placeOrApp.value = {
          label: "地点",
          value: 1,
        };
        this.step_1.poi_name.value = {
          poi_id: res.data.poi_id,
          poi_name: res.data.poi_name,
        };
      }
      // # 封面图 优惠券
      if (res.data.adimg) {
        this.step_1.adimg.value =
          res.data.adimg.indexOf("http") == -1
            ? JSON.parse(window.localStorage.getItem("baseUrl")) + res.data.adimg
            : res.data.adimg;
      }
      this.step_1.coupon.value = res.data.coupon;
      // # 时间
      let sharetime = this.step_1.sharetime.list.find(
        (v) => v.value == res.data.sharetime
      );
      this.step_1.sharetime.value = sharetime;
      if (sharetime.value == 1) {
        let sharetime_minute = this.step_1.sharetime_minute.list.find(
          (v) => v.value == res.data.sharetime_data
        );
        this.step_1.sharetime_minute.value = sharetime_minute;
      }
      if (sharetime.value == 2) {
        this.step_1.sharetime_hour.value = res.data.sharetime_data;
      }
      // @账号 音频
      this.step_1.atuser.value = res.data.atuser;
      this.step_1.atuser.list.unshift({
        label: "请选择一个需要@的账号(仅抖音支持)",
        value: "",
      });
      let f = res.data.video.split("|").filter((v) => v);
      let files = {};
      for (let i = 0; i < f.length; i++) {
        files[i] = {
          src: f[i],
        };
      }
      this.step_2.video.value = res.data.video;
      this.step_2.video.files = files;
      if (res.data.videotype == 0) {
        this.step_2.tab.value = "bendi";
        this.step_2.video.hidden = false;
      }
      if (res.data.videotype == 1) {
        this.step_2.tab.value = "muban";
        this.step_2.video.hidden = true;
      }
      this.step_1.qrCode.list = [];
      this.step_1.qrCode.list.push({
        url: JSON.parse(window.localStorage.getItem("baseUrl")) + res.data.dyimgurl,
      });
      this.step_1.qrCode.list.push({
        url: res.data.ksimgurl,
      });
      this.step_1.qrCode.hidden = false;
      console.log(this.step_1.qrCode.list, " this.step_1.qrCode.list");
    },
    changeForm(res) {
      this.tableQuery[res.key].value = res.val;
    },
    async getUserList() {
      let res = await this.$api.tctk_getUserList({
        type: "auser_qr",
      });
      let userList = [];
      for (let key in res.data) {
        userList.push({
          label: res.data[key],
          value: key,
        });
      }
      this.step_1.atuser.list = userList;
      this.step_1.notice.html[
        "2"
      ] = `<span>当前套餐 <span style="color:#387CF7">最多可添加拓客码${res.taocan}个</span>。</span>`;
    },
    // 搜索地点
    async searchPlace() {
      let reqBody = {};
      for (let key in this.placeQuery) {
        if (this.placeQuery[key].value == "") {
          return this.$message(`请输入${this.placeQuery[key].label}`);
        }
        reqBody[key] = this.placeQuery[key].value;
      }
      let res = await this.$api.wdsp_searchPlace(reqBody);
      this.step_1.poi_name.list = res.data;
    },
    //  重置
    reset() {
      for (let key in this.step_1) {
        if (this.step_1[key].type == "input") {
          this.step_1[key].value = "";
        }
      }
      this.step_1.adimg.value = "";
      // 地点、小程序
      this.step_1.poi_name.value = "";
      this.step_1.app.list.micro_app_id.value = "";
      this.step_1.app.list.micro_app_title.value = "";
      this.step_1.app.list.micro_app_url.value = "";

      this.step_1.duplicate.value = {
        label: "禁止",
        value: 0,
      };
      this.step_1.sharetime.value = {
        label: "立即分享",
        value: 0,
      };
      this.step_1.sharetime_minute.value = "";
      this.step_1.sharetime_hour.value = "";
      this.step_1.atuser.value = "";
      // step_2
      this.step_2.video.value = "";
      window.sessionStorage.removeItem("tctk_tmpl");
    },
    changeFormData(result, dataName) {
      if (result.k) {
        this[dataName][result.key].list[result.k].value = result.value;
      } else {
        this[dataName][result.key].value = result.value;
      }
      if (result.progress) {
        this[dataName][result.key].progress = result.progress;
      }
    },
    // 点击表单中的按钮
    handleClickBtn(key, dataName) {
      // 如果点击地点的 选择按钮
      if (key == "poi_name") {
        this[dataName][key].show = true;
      }
      if (key == "bendi") {
        this.step_2.video.hidden = false;
      }
      if (key == "muban") {
        this.step_2.video.hidden = true;
        this.$router.push({
          path: "/tctk/tmpl",
          query: {
            from: "tctkEdit",
            id: this.$route.query.id,
            activeTabVal: this.activeTabVal,
          },
        });
      }
    },
    // 点击弹窗的单选框
    handleClickDialogRadio(radio) {
      this.step_1.poi_name.value = radio;
    },
    // 下一步
    next() {
      this.activeTabVal++;
    },
    // 上一步
    prev() {
      this.activeTabVal--;
    },
    // 表单提交
    async confirm() {
      let form = {};
      Object.assign(form, this.step_1, this.step_2);
      // 校验表单必填项
      for (let key in form) {
        if (!form[key].required || form[key].hidden) {
          continue;
        }
        if (form[key].value == "") {
          return this.$message(form[key].toolTip);
        }
      }
      // 构造请求体数据
      let reqBody = {};
      let tctk_tmpl = window.sessionStorage.getItem("tctk_tmpl");
      if (this.step_2.tab.value == "muban" && !tctk_tmpl) {
      }
      if (this.step_2.tab.value == "muban" && tctk_tmpl) {
        reqBody.tpldata = JSON.parse(tctk_tmpl);
      }
      for (let key in form) {
        if (form[key].hidden || !form[key].field) {
          continue;
        }
        if (key == "poi_name") {
          reqBody.poi_id =
            form[key].value && form[key].value.poi_id
              ? form[key].value.poi_id
              : "";
          reqBody.poi_name =
            form[key].value && form[key].value.poi_name
              ? form[key].value.poi_name
              : "";
          continue;
        }
        if (key == "app") {
          for (let k in form[key].list) {
            reqBody[k] = form[key].list[k].value;
          }
          continue;
        }
        if (form[key].type == "radio") {
          reqBody[form[key].field] = form[key].value.value;
          continue;
        }
        if (form[key].field) {
          reqBody[form[key].field] = form[key].value;
        }
      }

      console.log(reqBody, "请求体");
      reqBody.id = this.detail.id;
      reqBody.qt_json = "20210728";
      let res = await this.$api.tctk_edit(reqBody);
      this.$message(res.msg);
      if (res.code == "0") {
        setTimeout(() => {
          window.sessionStorage.removeItem("tctk_tmpl");
          this.$router.push({ name: "tctkIndex" });
        }, 1000);
      }
    },
    goBack() {
      this.$router.push({ name: "tctk" });
    },
  },
};
</script>

<style lang="less" scoped>
.tctk {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 82px;
  box-sizing: border-box;
  background-color: #fff;
}

.tab-block {
  position: absolute;
  top: 52px;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  padding: 40px 0px;
  box-sizing: border-box;
  .icon-close {
    position: absolute;
    right: 25px;
    top: 25px;
    color: #999;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
  }
}
.tab-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 0px 100px 0px;
  box-sizing: border-box;
  .vertical-tab-block {
    flex-shrink: 0;
    width: 100%;
    height: 30%;
    padding: 0 0 0 42px;
    box-sizing: border-box;
  }
  .vertical-tab-item {
    flex-grow: 1;
    display: flex;
    padding: 0px 120px;
    box-sizing: border-box;
    overflow: auto;
    height: 70%;
    .left {
      width: 50%;
      height: 100%;
    }
    .right {
      position: relative;
      padding-top: 48px;
      box-sizing: border-box;
      width: 50%;
      height: 100%;
    }
  }
}
.form-btn-list {
  position: absolute;
  bottom: 40px;
  display: flex;
  justify-content: center;
  width: 100%;
  .button {
    width: 144px;
    height: 38px;
    margin-right: 32px;
  }
}

// 弹窗
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0;
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      padding: 0px 20px 0px 35px;
      box-sizing: border-box;
      border-bottom: 1px solid #e7e7e7;
      .label {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
      .icon-close {
        color: #999;
        font-size: 20px;
        user-select: none;
        cursor: pointer;
      }
    }
    .body {
      width: 100%;
      padding: 0px 35px 0px 35px;
      box-sizing: border-box;
      .search-block {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        .form-item {
          margin-right: 15px;
        }
      }
      .place-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 400px;
        overflow: auto;
        .list-item {
          display: flex;
          align-items: center;
          padding: 15px 20px;
          box-sizing: border-box;
          cursor: pointer;
          &:hover {
            background-color: #f4f7fc;
          }
          .radio {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid #ccc;
            transition: all 0.1s;
            margin-right: 15px;
            &:hover {
              border: 1px solid #387CF7 ;
            }
          }
          .label {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            .name {
              width: 40%;
            }
            .city {
              width: 55%;
            }
          }
        }
        .active {
          position: relative;
          background-color: #387CF7 ;
          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #fff;
          }
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80px;
      .button {
        width: 122px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
</style>